<template>
  <div class="compilationSummary-tab">
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <el-form-item label="账期">
          <el-date-picker v-model="form.year" type="month" placeholder="选择年" value-format="yyyyMM"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <dx-cascader
            :area_id.sync="form.areaId"
            :area_name.sync="form.areaName"
            :area_lvl.sync="form.areaLvl"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item class="wid100">
          {{form.autoService ? '自服务':'全业务'}}
          <el-switch v-model="form.autoService"></el-switch>
          <el-button size="small" style="margin-left: 12px" type="primary" @click="search">查询</el-button>
          <!-- <el-button size="small" type="orange" @click="batchxport()">批量导出</el-button> -->
          <el-button size="small" type="orange" @click="exportModal()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData1"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <!--  -->
        <el-table-column
          label="类别(单位：万元)"
          prop="class1"
          class-name="first-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="class2"
          class-name="second-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="indexName"
          class-name="third-title"
          min-width="110"
          fixed
        ></el-table-column>
        <el-table-column
          min-width="100"
          v-for="(item,index) in newArr"
          :key="index"
          :label="item"
          :prop="'val'+(index)"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
export default {
  name: "transverseIncome-tab1",
  data() {
    return {
      backRecord: false,
      form: {
        year: "",
        areaId: "",
        autoService: false,
      },
      accountInfo: "",
      tableData1: [],
      exportLoad: false,
      spanArr: [],
      newArr: [],
      tableLoading: false,
      flag: 1,
    };
  },
  created() {
    this.init();
    console.log(2222);
  },
  methods: {
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let year = this.form.year;
      let token = getCookie("token");
      // 根据不同模式切换不同的路径  mainIncome/exportIncomeData
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/mainIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&acctMonth=${year}&token=${token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          `/api/mainIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&acctMonth=${year}&token=${token}`;
      }
    },
    // 批量导出
    batchxport() {
      let areaId = this.form.areaId;
      let year = this.form.year;
      let token = getCookie("token");
      // this.exportLoad = true;
      // 根据不同模式切换不同的路
      // $budgetAPI.downloadBatch(
      //  {
      //    areaId:areaId,
      //    year:year,
      //    token:token,
      //  },
      //   res => {
      // if (res.code == 0) {
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/summaryThreeReport/downloadBatch?areaId=${areaId}&autoService=${this.form.autoService}&year=${year}&token=${token}`;
        // this.exportLoad = false;
        // console.log(code)
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          `/api/summaryThreeReport/downloadBatch?areaId=${areaId}&autoService=${this.form.autoService}&year=${year}&token=${token}`;
        // this.exportLoad = false;
        // console.log(code)
      }
      // }
      // }, err => {}

      //  );
    },
    init() {
      let query = this.$route.query;
      this.backRecord = typeof query.backRecord === undefined ? true : false;
      if (this.backRecord) {
        this.form.areaId = query.areaId;
        this.form.year = query.accMonth;
      } else {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
        this.form.year = this.moment().add(1, "years").format("YYYY");
      }
      this.getYear();
    },
    // 获取年份
    getYear() {
      $budgetAPI.incomeMainMonth(
        {},
        (res) => {
          if (res.code == 0) {
            this.form.year = res.content;
            this.list();
          } else {
            this.alertError(res);
          }
        },
        (err) => {}
      );
    },
    //查询
    search() {
      let params = {
        acctMonth: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        flag: this.flag,
        autoService: this.form.autoService,
      };
      this.listResourceData(params);
    },
    list() {
      if (this.$route.query.backRecord) {
        let query = this.$route.query;
        let params = {
          acctMonth: query.accMonth,
          importFlag: true,
          areaId: query.areaId,
          autoService: query.autoService,
          flag: 1,
        };
        this.listResourceData(params);
      } else {
        let params = {
          acctMonth: this.form.year,
          areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
          autoService: this.form.autoService,
        };
        this.listResourceData(params);
      }
    },
    listResourceData(params) {
      let that = this, data;
      that.tableLoading = true;

      $budgetAPI.incomeMain(
        params,
        (res) => {
          if (res.code == 0) {
            console.log(res);
            data = res.content.data;
            data.map((it) => {
              it.dataList.map((item, i) => {
                console.log(item.indexValue);
                it["val" + i] = item.indexValue;
              });
            });
            that.tableData1 = data;
            that.newArr = res.content.titles;
            that.spanArr = mergeSpan(that.tableData1, [
              "class1",
              "class2",
              "indexName",
            ]);
            that.$nextTick(() => {
              that.$refs.table.doLayout();
            });
            // this.initData();
            that.tableLoading = false;
          } else {
            that.alertError(res);
          }
        },
        (err) => {}
      );
    },
    // table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableData1.length > 0) {
        if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
          return this.spanArr[rowIndex][columnIndex];
        }
      }
    },
  },
};
</script>

<style lang="scss">
.compilationSummary-tab {
  .first-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .second-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .third-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-50%);
      white-space: nowrap;
      overflow: visible;
    }
  }
  /deep/ .third-title .cell {
    text-align: center;
  }
}
</style>
